<template>
  <!-- 项目实施 - 5进度报告 - 未完成tab1 -->
  <div class="progress-report-tab1">
    <el-row :gutter="20">
      <el-col :span="6" v-for="(i, idx) in cardListData" :key="idx" class="card-group">
        <card-list :cardData="i" :idx="idx"></card-list>
      </el-col>
      <el-col :span="24" style="margin-top:16px;">
        <el-form :model="formData" label-position="right" label-width="90px">
          <el-row :gutter="12">
            <el-col :span="16" v-if="showSearch == false">
              <advancedFilter></advancedFilter>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="项目名称">
                <el-input v-model="formData.ipt1" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="任务名称">
                <el-input v-model="formData.ipt2" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="里程碑">
                <el-select v-model="formData.sel1" multiple clearable placeholder="请选择..." style="width: 100%;">
                  <el-option label="勾选" value="shanghai"></el-option>
                  <el-option label="未勾选" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="任务状态">
                <el-select v-model="formData.sel2" multiple clearable placeholder="请选择..." style="width: 100%;">
                  <el-option label="待办" value="1"></el-option>
                  <el-option label="进行中" value="2"></el-option>
                  <el-option label="完成" value="3"></el-option>
                  <el-option label="暂停" value="4"></el-option>
                  <el-option label="终止" value="5"></el-option>
                  <el-option label="空值" value="6"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="负责人">
                <el-select v-model="formData.sel3" multiple clearable placeholder="请选择..." style="width: 100%;">
                  <el-option label="负责人A" value="1"></el-option>
                  <el-option label="负责人B" value="2"></el-option>
                  <el-option label="负责人C" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="WBS">
                <el-input v-model="formData.ipt3" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="showSearch ? 12 : 8" style="text-align: right;">
              <el-button type="primary">筛选</el-button>
              <el-button @click="resetForm">重置</el-button>
              <el-button type="text" @click="changeSearch"> {{showSearch===true ? '高级筛选' : '普通筛选'}} </el-button>
            </el-col>
            <el-col :span="24">
              <el-button class="progress-report-btn" @click="showModal('btnModal')" type="primary" plain> 进度报告 </el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="24" style="margin-top:16px;">
        <cust-act-table
          ref="custActTable"
          tableType=""
          :list="tableData"
          :colConfigs="customColumns"
          @changePage="changePage"
          @getSelectedRow="showModal('table')"
          :pageNum="page.pageNum"
          :pageSize="page.pageSize"
          :total="page.total"
          showIdx
          :showAct="false"
          rKey="index"
        ></cust-act-table>
      </el-col>
    </el-row>
    <!-- 点击按钮弹窗 -->
    <el-dialog title="工作进度报告" class="btn-modal" :visible.sync="btnModal" @close="closeModal('btnModal')" width="1200px" style="margin-top:6vh;" :close-on-click-modal="false">
      <detailModal :tabList="detailModalInfo.tabList" :modalImgs="detailModalInfo.imgs" :formDetailTitle="detailModalInfo.formDetailTitle" :formDetail="detailModalInfo.formList" :formData="detailModalInfo.doc" :rTabData="detailModalInfo.rTabData" menuType="进度报告"></detailModal>
    </el-dialog>
    <!-- 点击列表弹窗 -->
    <el-dialog title="查看" class="table-modal" :visible.sync="tableModalState" @close="closeModal('table')" width="940px" :close-on-click-modal="false">
      <modalBtns modalType="table"></modalBtns>
      <formName text="任务档案"></formName>
      <div class="form-content">
        <formPart listTitle="基本信息" @clickModalBtn="showNextLevelModal" ref="info1" modalTitle="modalDetail" :formList="formInfo.info1"></formPart>
        <formPart listTitle="进度信息" @clickModalBtn="showNextLevelModal" ref="info2" modalTitle="modalDetail" :formList="formInfo.info2"></formPart>
        <formPart listTitle="项目信息" ref="info3" modalTitle="modalDetail" :formList="formInfo.info3"></formPart>
      </div>
    </el-dialog>
    <!-- 前置任务 -->
    <el-dialog class="pre-task-modal" title="前置任务查询" :visible.sync="preTaskModalState" @close="closeModal('preTaskModal')"  width="1000px" :close-on-click-modal="false">
      <cust-act-table
        ref="preTaskModalTable"
        tableType=""
        :list="preTaskData"
        :colConfigs="preTaskCol"
        @changePage="preTaskModalTablePage"
        :pageNum="preTaskModalPage.pageNum"
        :pageSize="preTaskModalPage.pageSize"
        :total="preTaskModalPage.total"
        :showIdx="false"
        :showAct="false"
        rKey="index"
      ></cust-act-table>
    </el-dialog>
    <!-- 工作报告 -->
    <el-dialog class="work-modal" title="任务工作进度报告查询" :visible.sync="workModalState" @close="closeModal('workModal')" width="1000px" :close-on-click-modal="false">
      <cust-act-table
        ref="workModalTable"
        tableType=""
        :list="workModalData"
        :colConfigs="workModalCol"
        @changePage="workModalTablePage"
        @getSelectedRow="showModal('workModal2')"
        :pageNum="workModalPage.pageNum"
        :pageSize="workModalPage.pageSize"
        :total="workModalPage.total"
        :showIdx="false"
        :showAct="false"
        rKey="index"
      ></cust-act-table>
    </el-dialog>
    <!-- 工作报告二级弹窗 -->
    <el-dialog class="work-modal" title="查询穿透显示" :visible.sync="workModalState2" @close="closeModal('workModal2')" width="1000px" :close-on-click-modal="false">
      <formName text="工作报告档案"></formName>
      <div class="form-content">
        <formPart :showListTitle="false" ref="info1" modalTitle="modalDetail" :formList="workModalDetail.info1"></formPart>
        <formPart listTitle="基本信息" ref="info2" modalTitle="modalDetail" :formList="workModalDetail.info2"></formPart>
        <formPart listTitle="任务进度" ref="info3" modalTitle="TAB-TABLE-NOACT" :formList="workModalDetail.info3"></formPart>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import cardList from '../../components/cardList';
import custActTable from "../../components/custActTable.vue";
import detailModal from '../../components/detailModal';
import advancedFilter from '../../components/advancedFilter';
import modalBtns from '../../components/modalBtns';
import formName from '../../components/formName';
import formPart from '../../components/formPart';
import { tableData5, customColumns5, preTaskData, preTaskCol, workModalData, workModalCol, workModalDetail } from '../../js/staticData';
export default {
  name: "progressReportTab1",
  components: {cardList, custActTable, detailModal, advancedFilter, modalBtns, formName, formPart},
  data() {
    return {
      cardListData: [
        {
          img3: require('../../images/card-icon12.png'),
          line4: '未开始',
          line3: '1,005'
        },
        {
          img3: require('../../images/card-icon13.png'),
          line4: '进行中',
          line3: '4'
        },
        {
          img3: require('../../images/card-icon2.png'),
          line4: '已完成',
          line3: '187'
        },
        {
          img3: require('../../images/card-icon1.png'),
          line4: '已暂停',
          line3: '41'
        }
      ],
      formData: {
        ipt1: '',
        ipt2: '',
        ipt3: '',
        sel1: [],
        sel2: [],
        sel3: [],
      },
      showSearch: true,
      tableData: tableData5[0],
      customColumns: customColumns5[0],
      preTaskData: preTaskData,
      preTaskCol: preTaskCol,
      workModalCol: workModalCol,
      workModalData: workModalData,
      workModalDetail: workModalDetail,
      page: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      preTaskModalPage: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      workModalPage: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      formInfo: {
        info1: [
          { l: '任务名称', v: '蓝旗机器人造林', span: 12 },
          { l: '任务模式', v: '自动', span: 6 },
          { l: '任务状态', v: '进行中', span: 6 },
          { l: '任务序号', v: '15', span: 6 },
          { l: '负责人', v: '朱冠', span: 6 },
          { l: '负责人部门', v: 'XX部门', span: 6 },
          { l: '里程碑', v: '', span: 3, type: 'checkBox', checked: false },
          { l: '', v: '前置任务', span: 3, type: 'noLabelRoundButton', openModal: 'preTaskModal' },
          { l: 'web标识', v: 'jdbg1', span: 6 },
          { l: '标记关键任务', v: '', span: 6, type: 'checkBox', checked: false },
          { l: '计算出关键任务', v: '', span: 6, type: 'checkBox', checked: false },
          { l: '审批完成', v: '', span: 6, type: 'checkBox', checked: true },
          { l: '任务备注', v: '', span: 12 },
          { l: '限制类型', v: '越早越好', span: 6 },
          { l: '限制日期', v: '', span: 6 },
          { l: '需提交成果', v: '', span: 12 },
          { l: '成果文件', v: '', span: 12 },
          { l: '父任务名称', v: '', span: 12 },
          { l: '固定日期', v: '否', span: 6 },
          { l: '是否父任务', v: '是', span: 6 }
        ],
        info2: [
          { l: '计划工期', v: '31 天(自然日)', span: 6 },
          { l: '计划开始', v: '2024-06-30', span: 6 },
          { l: '计划完成', v: '2024-07-31', span: 6 },
          { l: '完成进度', v: '80 %', span: 3 },
          { l: '', v: '工作报告', span: 3, type: 'noLabelRoundButton', openModal: 'workModal' },
          { l: '实际工期', v: '29 天(自然日)', span: 6 },
          { l: '实际开始', v: '2024-06-30', span: 6 },
          { l: '实际完成', v: '', span: 6 },
          { l: '', v: '80', span: 6, type: 'noLabelProgress' },
        ],
        info3: [
          { l: '所属项目', v: 'XX有限责任公司系统建设', span: 12 },
          { l: '项目编号', v: 'SSXM202200011', span: 6 },
          { l: '项目状态', v: '执行', span: 6 }
        ]
      },
      btnModal: false,
      tableModalState: false, // 列表详情弹窗
      preTaskModalState: false, // 前置任务弹窗
      workModalState: false, // 工作报告弹窗
      workModalState2: false, // 工作报告二级弹窗
      modalType: '',
      detailModalInfo: {
        formDetailTitle: '工作进度报告',
        formList: [
          {
            title: '',
            modalTitle: 'EDIT-FORM',
            list: [
              { l: '报告人', v: '朱冠', span: 6 },
              { l: '报告日期', v: '2024-07-29', span: 6, type: 'datePicker' },
              { l: '报告部门', v: 'XX部门', span: 6 },
              { l: '№', v: '', span: 6 },
              { l: '报告单位', v: 'XX集团有限公司', span: 24 }
            ]
          },
          {
            title: '基本信息',
            modalTitle: 'EDIT-FORM',
            list: [
              { l: '项目名称', v: '', type: 'inputIconR', span: 12, icon: { path:require('../../images/modal-icon1.png'), width: '14px', height: '16px'} },
              { l: '报告类型', v: '', type: 'select', option: [{l:'日报', v: '0'},{l:'周报', v: '1'},{l:'月报', v: '2'}], span: 6 },
              { l: '工时合计', v: '0', type: 'textR', span: 6 },
              { l: '项目编号', v: '', span: 6 },
              { l: '项目进度', v: '', span: 6 },
              { l: '开始日期', v: '', span: 6 },
              { l: '完成日期', v: '', span: 6},
              { l: '报告内容', v: '', span: 24}
            ],
          },{
            title: '任务进度',
            modalTitle: 'EDIT-TABLE',
            // tip: '提示：任务计划审批完成后，WBS页面将限制修改任务，若需修改已审批任务请发起【计划变更】流程。',
            list: [
              {
                btns: ['新建', '多选任务', '删除', '删除全部'],
                tableCol: [
                  { label: '任务名称', prop: 'rwmc', slot: 'inputIconR', type: 'inputIconR', icon: { path:require('../../images/modal-icon3.png'), width: '16px', height: '16px'}, width: 150 },
                  { label: '投入工时', prop: 'trgs' },
                  { label: '完成比', prop: 'wcb', align: 'center' },
                  {
                    label: '开始日期',
                    align: 'center',
                    children: [
                      { label: '计划开始', prop: 'jhks', align: 'center', width: 100 },
                      { label: '实际开始', prop: 'sjks', align: 'center', width: 100 }
                    ]
                  },
                  {
                    label: '结束日期',
                    align: 'center',
                    children: [
                      { label: '计划完成日期', prop: 'jhwcrq', align: 'center' },
                      { label: '实际完成日期', prop: 'sjwcrq', align: 'center' }
                    ]
                  },
                  { label: '实际工期', prop: 'sjgq', align: 'center' },
                  { label: '成果文件', prop: 'cgwj', align: 'center' }
                ],
                tableData: [
                  {
                    rwmc: '',
                    trgs: '',
                    wcb: '',
                    jhks: '',
                    sjks: '',
                    jhwcrq: '',
                    sjwcrq: '',
                    sjgq: '',
                    cgwj: ''
                  }
                ],
                page: {
                  pageNum: 1, // 当前页
                  pageSize: 10, // 每页条数
                  total: 0 // 总条数
                }
              }
            ]
          }
        ],
        tabList: [
          {
            label: "智能校验",
            value: "1",
            img: require('../../images/icon-tab-rt-2.png'),
            active: require('../../images/icon-tab-rt-active-2.png')
          }, {
            label: "流程预测",
            value: "4",
            img: require('../../images/icon-tab-rt-4.png'),
            active: require('../../images/icon-tab-rt-active-4.png')
          }, {
            label: "相关数据",
            value: "5",
            img: require('../../images/icon-tab-rt-5.png'),
            active: require('../../images/icon-tab-rt-active-5.png')
          }
        ],
        title: "工作进度报告",
        imgs: {
          contentImgTitle: "工作进度报告",
          img1: require('../../images/report-modal-bg2.png'), // 查看流程
          img2: require('../../images/report-modal-bg2-2.png'), // 查看流程泳道框图
          img3: [], // 流程预测
        },
        doc: {
          name: `工作进度报告-{项目名称}-{报告人}-{报告日期}`,
          flow: `项目负责人(协同)、空节点、凌焘(协同)`
        },
        rTabData: [
          {
            label: '智能校验',
            info: [ // state: 1.不通过 2.警示 3.通过
              {l: '项目名称字段为空', state: 1, v: '不通过'},
              {l: '报告内容字段为空', state: 1, v: '不通过'},
              {l: '任务名称字段为空', state: 1, v: '不通过'},
              {l: '完成比字段为空', state: 1, v: '不通过'},
              {l: '报告类型字段为空', state: 1, v: '不通过'},
              {l: '任务投入工时字段为空', state: 1, v: '不通过'},
              {l: '您填写的内容存在错误，请查看提示信息后修改。', state: 3, v: '通过'}
            ]
          }, {
            label: '流程预测',
            info: [{}]
          }, {
            label: '相关数据',
            info: [
              {
                text: `蚂蚁森林工作进度报告-2024-04-25`,
                img: require('../../images/icon-doc.png')
              }, {
                text: `蚂蚁森林工作进度报告-2024-04-25`,
                img: require('../../images/icon-doc.png')
              }, {
                text: `蚂蚁森林工作进度报告-2024-04-25`,
                img: require('../../images/icon-doc.png')
              }, {
                text: `蚂蚁森林工作进度报告-2024-04-25`,
                img: require('../../images/icon-doc.png')
              }
            ]
          }
        ]
      }
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.tableData = tableData5[0];
      this.customColumns = customColumns5[0];
    })
  },
  methods: {
    /**
     * @author Wrl
     * 点击弹窗内部按钮
     */
    showNextLevelModal(val) {
      this.showModal(val);
    },
    /**
     * @author Wrl
     * 重置查询条件
     */
    resetForm() {
      this.formData = {};
    },
    /**
     * @author Wrl
     * 切换查询条件
     */
    changeSearch() {
      this.showSearch = !this.showSearch
    },
    /**
     * @author Wrl
     * 显示弹窗
     */
    showModal(type) {
      this.modalType = type;
      if(this.modalType == 'btnModal') {
        this.btnModal = true;
      } else if(type == 'preTaskModal') {
        this.preTaskModalState = true;
      } else if(type == 'workModal') {
        this.workModalState = true;
      } else if(type == 'workModal2') {
        this.workModalState2 = true;
      } else if(type == 'table') {
        this.tableModalState = true;
      }
    },
    /**
     * @author Wrl
     * 关闭弹窗
     */
    closeModal(type) {
      if(type == 'btnModal') {
        this.btnModal = false;
      } else if(type == 'table') {
        this.tableModalState = false;
      } else if(type == 'preTaskModal') {
        this.preTaskModalState = false;
      } else if(type == 'workModal') {
        this.workModalState = false;
      } else if(type == 'workModal2') {
        this.workModalState2 = false;
      }
    },
		/**
		 * @author Wrl
		 * 获取分页信息
		 */
		changePage(page) {
			this.page.pageNum = page.pageNum; // 当前页
			this.page.pageSize = page.pageSize; // 每页条数
			this.page.total = page.total; // 总数
		},
    /**
     * @author Wrl
     * 前置任务弹窗列表分页
     */
    preTaskModalTablePage(page) {
			this.preTaskModalPage.pageNum = page.pageNum; // 当前页
			this.preTaskModalPage.pageSize = page.pageSize; // 每页条数
			this.preTaskModalPage.total = page.total; // 总数
		},
    /**
     * @author Wrl
     * 工作报告弹窗列表分页
     */
    workModalTablePage(page) {
			this.workModalPage.pageNum = page.pageNum; // 当前页
			this.workModalPage.pageSize = page.pageSize; // 每页条数
			this.workModalPage.total = page.total; // 总数
		},
  }
}
</script>

<style lang="scss" scoped>
  .progress-report-tab1 {
    ::v-deep .card-item {
      cursor: unset;
    }
    ::v-deep {
      .btn-modal .el-dialog__header {
        padding-top: 20px;
      }
      .btn-modal .el-dialog__body {
        padding: 5px;
        background: #eeeeee;
      }
      .flow-modal .el-dialog__header {
        padding-top: 20px;
      }
      .flow-modal .el-dialog__body {
        background: #ffffff;
      }
      .table-modal .el-dialog__body {
        padding: 0px 20px 20px;
      }
      .next-level-modal .el-dialog__body {
        padding: 0px 20px 20px;
        text-align: center;
      }
    }
  }
</style>